<template>
  <div>
       <Header></Header>
		<el-row type="flex" class="row-bg" justify="center" :gutter="30">
			<el-col :span="8">
				<el-carousel trigger="click">
					<el-carousel-item v-for="item in productAllInfo.productImgList" :key="item.id">
						<!-- <h3 class="small">{{ item.url }}</h3> -->
						<img :src=item.url class="image"/>
					</el-carousel-item>
				</el-carousel>
			</el-col>
			<el-col :span="10">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span class="texts">{{productAllInfo.productId.productName}}</span>
						<el-button style="float: right; padding: 3px 0" type="text">点击领劵</el-button>
					</div>
					<div class="text item">
						商品销量：{{productAllInfo.productId.soldNum}}
					</div>
					<div class="text item">
						商品内容：{{productAllInfo.productId.content}}
					</div>
					<div class="text item">
						促销价： ￥{{productAllInfo.productSkuList[0].sellPrice}}
					</div>
					<div class="text item" >
						原价： ￥<s>{{productAllInfo.productSkuList[0].originalPrice}}</s>
					</div>
					<div class="text item" >
						数量： 
						<el-button type="info" size="mini" @click="minusNum()" style="margin-right: 3px;">
							<i class="fa fa-minus"></i>
						</el-button>
						<el-input size="small" style="width: 80px;" v-model="productNumber" @focus="storeNum(productNumber)" @blur="validateNum()"></el-input> 
						<el-button style="margin-left: 3px;" @click="addNum()"  type="info" size="mini">
							<i class="fa fa-plus"></i>
						</el-button>
						现有存货：{{productAllInfo.productSkuList[0].stock}}
					</div>
					<div class="text item" >
						<el-button type="danger" size="mini" @click="addShoppingCart">加入购物车</el-button>
					</div>
				</el-card>
			</el-col>
		</el-row>
<el-row type="flex" class="row-bg" justify="center" :gutter="20">
	<!-- @select="handleSelect" :default-active="activeIndex2" -->
  <el-col :span="18">
		<el-menu 
		:default-active="activeIndex"
		class="el-menu-demo"
		mode="horizontal"
		
		background-color="#545c64"
		text-color="#fff"
		active-text-color="#ffd04b">
			<el-menu-item index="1"  @click="particulars">宝贝详情</el-menu-item>
			<el-menu-item index="2"  @click="evaluate">全部评价</el-menu-item>
			<router-link tag="el-menu-item" to="/introduction/particulars">猜你喜欢</router-link>
			<!-- <el-menu-item index="1">宝贝详情</el-menu-item>
			<el-menu-item index="2">全部评价</el-menu-item>
			<el-menu-item index="3">猜你喜欢</el-menu-item> -->
		</el-menu>	
  </el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center" :gutter="20">
  <el-col :span="18">
    <router-view></router-view>	
  </el-col>
</el-row>	
		<Footer></Footer>
  </div>
</template>

<script>
// import axios from 'axios'
import http from "../core/HttpRequest"
import Header from '../components/Index/Header.vue'
import Footer from '../components/Index/Footer.vue'
// import { config } from 'vue/types/umd'
// import Vue from 'vue'
// Vue.config.errorHandler = function(err, vm, info) {
//   console.log(`Error: ${err.toString()}\nInfo: ${info}`);
// }

export default {
  components: { Header,Footer},
  data() {
	return {
		activeIndex: '1',
		productNumber: 1,
		productAllInfo: [],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
		goodSimpleInfo: 0
	}
  },
  mounted: function(){

	http.get('/product/show',{
			params: {
				productId: this.$route.query.productId
			}
		}).then(res => {
		this.productAllInfo = res.data.data

		if(this.productAllInfo.productSkuList[0].sellPrice == null){
			
			if(confirm('商品信息有误为保障您的消费体验请重新选择商品^.^')) {
				this.$router.push({
					path: '/index',
				});
			} else {
				this.$router.push({
					path: '/index',
				});
			}

		}else {
			this.particulars()
		}
		

	})
  },
  methods: {
	particulars(){
		this.$router.push({
			path: '/introduction/particulars',
			query: {
				// particulars:JSON.stringify(this.productAllInfo.productParams)
				particulars:this.productAllInfo.productParams.productId
			}
		});
	},
	evaluate(){
		this.$router.push({
			path: '/introduction/evaluate',
			query: {
				particulars:this.productAllInfo.productParams.productId
			}
		});
	},
	addNum(){
		this.productNumber++
	},
	minusNum(){
		
		if(this.productNumber == 1) {
			// confirm() 用户点击 “确定” 返回true, 点击 “取消” 返回 false
			if(confirm('目前数量为1')) {
				return
			}
		}else {   
			this.productNumber--
		}
	},
	// 用户每次获得焦点，就将其原本的数量进行存储，以便于将来用户输入非数字的时候进行还原
	storeNum(cNum) {
		this.goodSimpleInfo = cNum
	},
	// 校验数据量
	validateNum() {
		// 获取到用户当前的输入
		let reg = /^[1-9]\d*$/;  // 以1-9开头
		if(!reg.test(this.productNumber)) {// 不为数字
			this.productNumber = this.goodSimpleInfo  // 就还原会以前的值
		}
		if(this.productNumber > this.productAllInfo.productSkuList[0].stock){
			alert("亲不好意思，当前库存不够，请重新输入数量")
			this.productNumber = this.goodSimpleInfo
		}
	},
	addShoppingCart(){
		if(this.$cookies.get("username")){
			let address = new URLSearchParams()
			address.append('productId', this.productAllInfo.productParams.productId), 
			address.append('skuId', 2), 
			address.append('userName', this.$cookies.get("username")), 
			address.append('cartNum', this.productNumber), 
			address.append('productPrice', this.productAllInfo.productSkuList[0].sellPrice), 
			address.append('skuProps', "null"), 
			http({
				method: "post",
				url: `/shoppingCart/add`,
				data: address
			})
			.then(res=> {
				console.log(res);
				this.$router.push({
					path: '/my-cart',
					query: {
						
					}
				});
			})
		} else {
			if(confirm('您还没有登录，登录请确定')) {
				this.$router.push({
					path: '/login',
					
				});
			}
				
		}
			
	}
}

}
</script>

<style>
  .text {
    font-size: 16px;
  }
  .texts {
	font-weight: 900;
    font-size: 24px;
  }
  .number {
	width: 40px;
	height: 40px;
  }
  .item {
    margin-bottom: 16px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    /* line-height: 250px; */
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .row-bg {
	margin-bottom: 20px;
	margin-top: 20px;
  }
  /* .image {
	height: 300px;
  } */
</style>